import { useMemo } from "react"

interface IconFontProps
  extends React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLSpanElement>,
    HTMLSpanElement
  > {
  type?: string
  size?: number
  color?: string
  width?: number | string
  height?: number | string
  pointer?: boolean
}

export default function IconFont({
  type,
  className,
  style,
  color,
  size,
  width,
  height,
  pointer,
  onClick,
  ...restProps
}: IconFontProps) {
  const iconType = useMemo(() => {
    if (type) {
      if (/^icon\-/.test(type)) {
        return type
      } else {
        return "icon-" + type
      }
    } else {
      if (import.meta.env.DEV) {
        console.warn("没有指定具体图标类型,仅有占位功能")
      }
    }
  }, [type])

  return (
    <span
      className={className}
      style={{
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        flexShrink: 0,
        width,
        height,
        cursor: pointer ? "pointer" : "initial",
        ...style
      }}
      onClick={onClick}
    >
      <span
        style={{ color, fontSize: size }}
        className={`iconfont ${iconType}`}
        {...restProps}
      ></span>
    </span>
  )
}
